<template>
      <el-cascader v-model="value" :options="options" @change="handleChange" :show-all-levels="true"></el-cascader>
</template>

<script>
export default {
    props:['cityId','areaId','clearArr',"clearAdd"] ,   
  data() {
    return {
     
      value: [],
      options: [],
      // clearText:false,
      // clearAdd:false
    };
  },
  watch: {
    //可以监听cityId活着areaId，因为一开始是空值，所以我们需要监听，当数据回来的时候，把数据渲染到级联输入框中
      cityId(){    
        this.value=[this.cityId,this.areaId]
        console.log( this.value)
        
      },
      clearArr(){
        this.value = this.clearArr;
      },
      // clear(){
      //   this.clearText=this.clear
      //      if( this.clearText){
      //      this.value=[]
      //        }
      // },
      clearAdd(){
        // this.clearAdd=this.clearAdd
        //    if( this.clearAdd){
        //    this.value=[]
        //      }
        this.value=this.clearAdd
      }     
  },
  created() { 
      this.getData();    
      
  },
  methods: {
       //获取城市列表和区域列表的数据
    getData() {
      let cityUrl = "/city/allCity";
      let areaUrl = "/area/allArea";
      const cityPromise = this.$axios.post(cityUrl);
      const areaPromise = this.$axios.post(areaUrl);
      Promise.all([cityPromise, areaPromise])
        .then(res => {
   
          const citieArrs = res[0].cities;
          const areaArrs = res[1].areas;       
       const newcitys = citieArrs.map(citys => {
        
           const areas= areaArrs.filter(area=>{
               return area.cityId===citys.cityId;
           })
          console.log("格式化之前：",areas)
          const newArea=areas.map(area=>{
                return {
                     value: area.areaId,
                     label:area.name,
                }
            })   
              console.log("格式化之后：",newArea)       
            return {
                label:citys.name,
                value:citys.cityId,
                children:newArea
            };
          });     
          this.options=newcitys
          console.log("this.options",this.options)
        })
        .catch(err => {
           this.$message.error("数据出错，没有返回");
        });
    },

    handleChange(value) { 
       this.$emit('getData',value)     
    }
  }
};
</script>
<style lang="less" scoped>
    .el-cascader{
        width: 100%;
    }
</style>